<template>
	<view class="invoiceCenterBox">
		<uv-navbar title="发票中心" @leftClick="goBack" bgColor="#277CC0" :placeholder="true"
			titleStyle="color:#FFFFFF;fontWeight:500" leftIconColor="#FFFFFF"></uv-navbar>
		<view class="listBox">
			<uv-checkbox-group v-model="checkboxValue" @change="changeValue" shape="circle" placement="column" >
				<view class="listItem" v-for="(item,n) in invoice_list" :key="n">
					<uv-checkbox :name="item.id" :customStyle="{marginBottom: '8px'}"></uv-checkbox>
					<view class="cardItem">
						<view class="titleText">
							<view class="codeText">
								订单编号：{{item.order_sn}}
							</view>
							<view class="statusText">
								{{item.status==0?'待确认':item.status==1?'未支付':item.status==2?'已支付':'已完成'}}
							</view>
						</view>
						<view class="addressText">
							<text>{{item.area_oring}}</text>
							<image src="../../static/images/i1.png" mode=""></image>
							<text>{{item.area_dest}}</text>
						</view>
						<view class="carInfo">
                            <view v-if="item.car_arr" class="infoItem" v-for="(i,n) in JSON.parse(item.car_arr)">
                            	<view class="leftItem">
                            		车型：{{i.chexing}}
                            	</view>
                            	<view class="rightItem">
                            		车辆估值：{{i.baozhi}}万元
                            	</view>
                            </view>
							<!-- <view class="infoItem">
								<view class="leftItem">
									车型：比亚迪 宋Plus
								</view>
								<view class="rightItem">
									车辆估值：25万元
								</view>
							</view> -->
							<view class="infoItem" style="margin: 12rpx 0rpx;">
								<view class="leftItem">
									发运日期：{{item.time}}
								</view>
								<view class="rightItem">
									委托人：{{item.consignee}}
								</view>
							</view>
							<view class="infoItem">
								<view class="leftItem">
									上门提车：{{item.is_door_val==1?'上门取车':"送至网点"}}
								</view>
								<view class="rightItem">
									送车上门：{{item.is_car_val==1?'上门取车':"送至网点"}}
								</view>
							</view>
						</view>
						<view class="moneyText">
							运费：{{item.total_amount}}元
						</view>
					</view>
				</view>
			</uv-checkbox-group>
        <view class="" v-if="invoice_list.length==0">
            <uv-empty mode="data" icon="https://cdn.uviewui.com/uview/empty/data.png"></uv-empty>
        </view>
		</view>
		<view class="totalMonetBox" v-if="invoice_list.length>0">
			<uv-checkbox-group @change="changeAll" shape="circle" v-model="radiovalue">
			<uv-checkbox  name="All">
			</uv-checkbox>
			<text>已选1</text>
			</uv-checkbox-group>
			<view class="allMoney">
				总金额：<text>{{allMoney}}元</text>
			</view>
			<view class="next_btn" @click="nextBtn">
				下一步
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				checked: false,
				radiovalue:[],
				checkboxValue:[],
                invoice_list:[],
                allMoney:0
			};
		},
		onShow() {
			this.getList()
		},
		methods: {
            changeValue(e){
                console.log(e,this.checkboxValue)
              if(e.length>0){
                  this.radiovalue[0]='All'
                  this.dealMoney()
              }else{
                  this.allMoney=0
              }
            },
            changeAll(e){
                    if(e.length>0){
                        this.checkboxValue= this.invoice_list.map(item=>{
                            return item.id
                        })
                        this.dealMoney()
                    }else{
                        this.checkboxValue=[]
                        this.allMoney=0
                    }
            },
            dealMoney(){
                    this.allMoney=0
                    this.invoice_list.map(item=>{
                        this.checkboxValue.map(i=>{
                                if(item.id==i){
                                    this.allMoney+= Number(item.total_amount)
                                }
                        })
                        
                    })
            },
            formateTime(data){
              return this.$utils.formatDateTime(data)  
            },
			async getList(){
			const {data} = await this.$api.getinvoice()
            this.invoice_list = data.invoice_list
			},
			goBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			//下一步
			nextBtn(){
                if(!this.checkboxValue.length) return  this.$utils.msg('请勾选要开发票的订单')
                let ids= this.checkboxValue.join(',')
                
				uni.navigateTo({
					url:'/pages/mine/invoiceApply?id='+ids+'&money='+this.allMoney
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.invoiceCenterBox {
		min-height: 100vh;
		background-color: #F5F5F5;
		padding: 24rpx 0rpx;
		padding-bottom: 158rpx;
		padding-left: 18rpx;
		position: relative;

		.listBox {
			.listItem {
				display: flex;

				.cardItem {
					width: 654rpx;
					height: 387rpx;
					background: #FFFFFF;
					border-radius: 12rpx;

					.titleText {
						display: flex;
						justify-content: space-between;
						color: #FFFFFF;
						font-size: 26rpx;
						background-color: #4A4947;
						height: 54rpx;
						line-height: 54rpx;
						border-radius: 8rpx 8rpx 0rpx 0rpx;
						padding: 0rpx 18rpx;
						margin-bottom: 24rpx;
					}

					.addressText {
						display: flex;
						width: 601rpx;
						justify-content: space-around;
						align-items: center;
						margin: 0 auto;

						image {
							width: 166rpx;
							height: 17rpx;
						}
					}

					.carInfo {
						width: 601rpx;
						height: 168rpx;
						background: #F5F5F5;
						border-radius: 6rpx;
						margin: 0 auto;
						margin-top: 41rpx;
						padding: 24rpx 0rpx 0rpx 30rpx;

						.infoItem {
							color: #222222;
							display: flex;
							font-size: 22rpx;

							.leftItem {
								flex-basis: 0rpx;
								flex-grow: 1;
								overflow: hidden;
							}

							.rightItem {
								flex-basis: 0rpx;
								flex-grow: 1;
								overflow: hidden;
							}
						}
					}

					.moneyText {
						display: flex;
						justify-content: flex-end;
						font-size: 26rpx;
						color: #D72031;
						margin-top: 17rpx;
						margin-right: 25rpx;
					}
				}
			}
		}

		.totalMonetBox {
			position: fixed;
			bottom: 0rpx;
			left: 0rpx;
			z-index: 999;
			width: 750rpx;
			height: 141rpx;
			background-color: #FFFFFF;
			display: flex;
			align-items: center;
			padding-left: 26rpx;
			.allMoney{
				color:#7C7C7C;
				font-size: 22rpx;
				text{
					font-size: 30rpx;
					color:#D72031;
				}
			}
			.next_btn{
				width: 208rpx;
				height: 54rpx;
				background: #277CC0;
				border-radius: 6rpx;
				margin-left: 63rpx;
				margin-right: 15rpx;
				line-height: 54rpx;
				text-align: center;
				color:#FFFFFF;
				font-size: 24rpx;
			}
		}
	}
</style>